<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人日程</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link href='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.css' rel='stylesheet' />
    <link href='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.print.css' rel='stylesheet' media='print' />
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
    <script src="${ctx}/public/component.js" type="text/javascript"></script>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <table id="sysMyScheduleTable" lay-filter="sysMyScheduleTable"></table>
            </div>
            <div class="layui-col-xs6">
                <div id='calendar' style="height: 500px;"></div>
            </div>
        </div>
    </div>
    <!-- 列表头部工具栏 -->
    <script type="text/html" id="sysMyScheduleHeaderToolsBar">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" wintitle="新增数据" areaw='500px' areah="450px"
               requrl="{{ serverPath.systemPath  + layui.setter.sysLinkPath}}sysMySchedule/view/add" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                <span>新增</span>
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete" requrl="{{ serverPath.systemPath + layui.setter.systemPath }}sysMySchedule/del">
                <i class="layui-icon layui-icon-delete"></i>
                <span>删除</span>
            </a>
    <!--        <a class="layui-btn layui-btn-sm" lay-event="query">-->
    <!--            <i class="layui-icon layui-icon-search"></i>-->
    <!--            <span>查询</span>-->
    <!--        </a>-->
        </div>
    <!--    <form class="layui-form" action="" lay-filter="sysMyScheduleQueryForm" style="margin-right: 30px;">-->
    <!--        <div class="layui-row" style="margin-top: 10px;">-->
    <!--            <div class="selch table-top-filter">-->
    <!--                <div class="table-filter-alone">-->
    <!--                    <label class="layui-form-label">类型</label>-->
    <!--                    <select class="filter-value " id="scheduleType" name="Q_scheduleType_N" >-->
    <!--                        <option value="">-&#45;&#45;&#45;&#45;请选择&#45;&#45;&#45;&#45;</option>-->
    <!--                        <option value="2">个人</option>-->
    <!--                        <option value="1">督办</option>-->
    <!--                        <option value="0">会议</option>-->
    <!--                    </select>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </form>-->
    </script>
    <!-- 右侧工具栏 -->
    <script type="text/html" id="sysMyScheduleRightToolsBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit" wintitle="修改数据" areaw='500px' areah="600px"
           requrl="{{serverPath.systemPath + layui.setter.sysLinkPath}}sysMySchedule/view/add?id={{ d.id }}"><i class="iconfont iconbianjisekuai"></i></a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
           requrl="{{ serverPath.systemPath + layui.setter.sysLinkPath}}sysMySchedule/del?id={{d.id}}"><i class="iconfont iconshanchu"></i></a>
    </script>

    <script type="text/html" id="scheduleUrgency">
        {{# if(d.scheduleUrgency === 2){}}
        <span style="color: #ff7800;">紧急</span> {{# } else if(d.scheduleUrgency === 1){}}
        <span style="color: #Fbc509;">重要</span> {{#} else if(d.scheduleUrgency === 0){}}
        <span style="color: #75e706;">一般</span> {{#} else {}} {{d.scheduleUrgency}} {{# } }}
    </script>


    <input type="hidden" id="viewType" value="">
    <input type="hidden" id="calendarStart" value="">
    <input type="hidden" id="calendarEnd" value="">


    <script src="${ctx}/layui/layui.js"></script>
    <!--<script type="text/javascript" src=". /extends/fullcalendar-2.5.0/lib/jquery.min.js"></script>-->
    <script src='${ctx}/extends/fullcalendar-2.5.0/lib/moment.min.js'></script>
    <script src='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.js'></script>
    <script type="text/javascript" src='${ctx}/extends/fullcalendar-2.5.0/lang/zh-cn.js'></script>
    <script>
        layui.config({
            base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
        }).extend({
            index: 'index' //主入口模块
        }).use(['index','table', 'setter','jquery','form', 'common','totalFilter','commons'], function () {
            var table = layui.table;
            var setter = layui.setter;
            var form = layui.form;
            var common = layui.common;
            var commons = layui.commons;
            var $=layui.jquery;
            var totalFilter = layui.totalFilter;
            var tableH=commons.tabHeight('full-70');
            $('#calendar').fullCalendar({
                locale: 'zh-cn',
                buttonText: {
                    today: '今天',
                    month: '月',
                    week: '周',
                    day: '日'
                },
                allDaySlot: true,//allday 整天的日程是否显示
                timeFormat: 'HH:mm',
                timezone:'local',//拖拽时区问题（默认每次拖动加八小时）
                slotLabelFormat: {
                    hour: 'numeric',
                    hour12: false
                },
                firstDay: 1,
                defaultView: 'month',
                displayEventTime: false,
                displayEventEntTime: false,
                plugins: ['interaction', 'dayGrid', 'timeGrid'],
                //defaultDate: '2019-04-12',
                editable: true,
                selectable: true,
                eventLimit: true, // allow "more" link when too many events
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                eventRender: function (event, element) {//title以HTML显示（换行）
                    element.html(event.title);
                },
                slotLabelFormat:'HH:mm',//确定将在议程视图的垂直轴上显示的时间文本。
                slotDuration:'00:30:00',//在agenda的视图中, 两个时间之间的间隔(分钟)
                scrollTime :'08:00:00',//当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置
                nextDayThreshold:'00:00:00',//当一个事件的结束时间跨越到第二天的时间时，就像一天中的时间呈现最短的持续时间。默认：“09:00:00”（上午9点）
                eventDrop:function( event ){dragOrResize(event);},
                eventResize: function(event) {dragOrResize(event);},
                eventClick: function(info) {},
                eventMouseEnter:function(info ){},
                eventMouseLeave:function(info ){},
                events: function (start,end,timezone, callback) {
                    var view = $('#calendar').fullCalendar('getView');
                    var viewName = view.name;
                    $("#viewType").val(viewName);
                    var url = serverPath.basePath + '/system/sysMySchedule/queryschedule?startDate=' + start.valueOf() + '&endDate=' + end.valueOf() + '&viewType=' + viewName + '&time=' + new Date().getTime();
                    $.ajax({
                        type : 'post',
                        url : url,
                        dataType : 'json',
                        success : function(result) {
                            if(result.code ===1){
                                layer.alert("数据查询失败");
                                //为了避免不显示表格，查询失败也渲染一下表格
                                loadScheduleTable();
                                return;
                            }
                            var events = [];
                            $.each(result.data,function(i,note){
                                var title = note.scheduleName;
                                var color = "#34c9df";
                                if(note.scheduleUrgency=='2'){
                                    color="#ff7800";
                                }else if(note.scheduleUrgency=='1'){
                                    color="#Fbc509";
                                }else if(note.scheduleUrgency=='0'){
                                    color="#75e706";
                                }
                                var s1 = note.scheduleStart.substring(0,10);
                                var e1 = note.scheduleEnd.substring(0,10);
                                var timeStr = "";
                                if(s1==e1){
                                    var s = note.scheduleStart.substring(11).substring(0,5);
                                    var e = note.scheduleEnd.substring(11).substring(0,5);
                                    if(e=="00:00"){
                                        e = "24:00";
                                    }
                                    timeStr = s+" - "+e+"\n"
                                }
                                events.push({
                                    id : note.id,
                                    title : timeStr+title,
                                    start : removeZero(note.scheduleStart),
                                    end : removeZero(note.scheduleEnd),
                                    backgroundColor : color
                                });
                            });
                            callback(events);
                            $("#calendarStart").val(start.valueOf());
                            $("#calendarEnd").val(end.valueOf());
                            loadScheduleTable();
                        },
                        error:function(){
                            layer.alert("数据查询失败");
                        }
                    });
                }
            });

            //日历拖拽
            function dragOrResize(event){
                var start = event.start.valueOf();
                var end = event.end;
                if(end!=null && end!='' && end !='undefined' && end!='null'){
                    end = end.valueOf();
                }else{
                    end="";
                }
                $.ajax({
                    type : 'post',
                    url : serverPath.systemPath + setter.sysLinkPath+'sysMySchedule/dragOrResize?allDay='+event.allDay+'&id='+event.id+'&startDate='+start+'&endDate='+end+'&time='+new Date().getTime(),
                    dataType : 'json',
                    success : function(result) {
                        $('#calendar').fullCalendar('refetchEvents')
                        // calendar.refetchEvents();
                    },
                    error:function(){
                       // info.revert();
                    }
                });
            }

            String.prototype.endWith=function(str){
                if(str==null||str==""||this.length==0||str.length>this.length)
                    return false;
                if(this.substring(this.length-str.length)==str)
                    return true;
                else
                    return false;
                return true;
            }
            /**
             * 去掉日期字符串后边的00:00,否则影响全天日程的显示效果
             * @param dateStr 日程字符串
             * @returns {string|*}
             */
            function removeZero(dateStr){
                if(dateStr.endWith(" 00:00:00")){
                    return dateStr.substring(0,10);
                }
                //年月日后边拼接大写字母T，否则在低版本火狐中显示有问题，只能显示全天日程
                var yyyymmdd = dateStr.substring(0,10);
                var hhmm = dateStr.substring(11);
                dateStr = yyyymmdd+"T"+hhmm;
                return dateStr;
            }

            common.tableSort('sysMyScheduleTable');
            var loadScheduleTable = function(){
                var scheduleType = getScheduleType();
                var viewType = $("#viewType").val();
                var startDate = $("#calendarStart").val();
                var endDate = $("#calendarEnd").val();
                var url =  serverPath.systemPath + setter.sysLinkPath+'sysMySchedule/queryschedule?startDate='+startDate+'&endDate='+endDate+'&scheduleType='+scheduleType+'&viewType='+viewType+'&time='+new Date().getTime();
                table.render({
                    elem: '#sysMyScheduleTable'
                    ,height:tableH
                    ,autoSort:true  //是否排序
                    ,url: url
                    ,page: false //开启分页
                    ,defaultToolbar: ['filter', 'print']
                    ,toolbar: '#sysMyScheduleHeaderToolsBar'
                    ,method: 'post'
                    ,autoSort: false
                    ,cols: [[ //表头
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'id', title: '主键UUID',hide:true,sort:true, sortname: 'id'}
                        ,{field: 'scheduleName', title: '标题',width:200}
                        ,{field: 'scheduleStart', title: '开始时间',width:165}
                        ,{field: 'scheduleEnd', title: '结束时间',width:165}
                        ,{field: 'scheduleType', title: '类型',width: 70,templet: function (d) {
                                if (d.scheduleType == '0') {
                                    return '会议';
                                }
                                if (d.scheduleType == '1') {
                                    return '督办';
                                }
                                if (d.scheduleType == '2') {
                                    return '个人';
                                }
                                return '';
                            }}
                        ,{field: 'scheduleUrgency', title: '缓急',width: 70,templet: '#scheduleUrgency'}
                        ,{fixed: 'right',align: 'center',title: '管理',width: 100,toolbar: '#sysMyScheduleRightToolsBar'}
                    ]]
                });
            };

            //获取日程类型的值
            function getScheduleType(){
                var scheduleType = $("#scheduleType").val();
                if(!scheduleType || scheduleType=="undefined"){
                    scheduleType="";
                }
                return scheduleType;
            }

            commons.reflashDate({startName:'.start_time',endName:'.end_time'});
            function reflashQuery(isClear) {
                common.tableConditionRender("sysMyScheduleTable","sysMyScheduleQueryForm",{where:{}},isClear);
            }

            table.on('toolbar(sysMyScheduleTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                var _this = this;
                switch (obj.event) {
                    case 'add':
                        layer.open({
                            type: 2,
                            title: _this.getAttribute('wintitle'),
                            area: [_this.getAttribute('areaw'), _this.getAttribute('areah')],
                            content: _this.getAttribute('requrl')
                        });
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请先选择一行数据!');
                        } else {
                            var array = "";
                            for (var i = 0; i < data.length; i++) {
                                array+=data[i].id+",";
                            }
                            layer.confirm('确定删除当前数据吗?', function (index) {
                                layer.close(index);
                                $.ajax({
                                    url: serverPath.systemPath + setter.sysLinkPath+"sysMySchedule/del",
                                    type: "post",
                                    data: {id:array},
                                    dataType: 'json',
                                    success: function (data) {
                                        layer.alert(data.msg);
                                        table.reload('sysMyScheduleTable');
                                        $('#calendar').fullCalendar('refetchEvents');
                                    },
                                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                        layer.alert(data.msg);
                                        reflashQuery(true);
                                    }
                                });
                            })
                        }
                        break;
                    case "query":
                        calendar.refetchEvents();
                        break;
                };
            });

            table.on('tool(sysMyScheduleTable)', function(obj) {
                var data = obj.data, //获得当前行数据
                    layEvent = obj.event; //获得 lay-event 对应的值
                switch(layEvent){
                    case "edit":
                        layer.open({
                            type: 2,
                            area: ['500px', '450px'],
                            title: ['修改数据'],
                            content: serverPath.systemPath +  setter.sysLinkPath + 'sysMySchedule/view/add?id='+data.id
                        });
                        break;
                    case "del":
                        if (data.length === 0) {
                            layer.msg('请先选择一行数据!');
                        } else {
                            layer.confirm('确定删除当前数据吗?', function (index) {
                                layer.close(index);
                                $.ajax({
                                    url: serverPath.systemPath + setter.sysLinkPath+"sysMySchedule/del",
                                    type: "post",
                                    data: {id:data.id},
                                    dataType: 'json',
                                    success: function (data) {
                                        layer.alert(data.msg);
                                        table.reload('sysMyScheduleTable');
                                        $('#calendar').fullCalendar('refetchEvents')
                                    },
                                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                        layer.alert(data.msg);
                                        reflashQuery(true);
                                    }
                                })
                            })
                        }
                        break;
                }
            });

        });
    </script>
    </body>
    </html>
<link rel="stylesheet" href="${ctx}/css/font/iconfontie.css" media="all"/>
<link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>